.page {
  position: relative;
  min-height: 100%;

  &::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #7b92fa, $alpha: 1) url('/bg.png') repeat left top /
      100%;
  }
}

.container {
  position: relative;
  z-index: 10;
  padding: 0 20px 20px;
}

.box {
  padding: 10px;
  border-radius: var(--border-radius);
  background-color: rgba(0, 0, 0, 0.3);

  &--bg {
    border: 1px solid /* #ifdef APP-PLUS */ /* #endif */ 8187f4;
    background: linear-gradient(to bottom, #6069f1, #467cf1);
  }
}

.opacity {
  background-color: rgba(0, 0, 0, 0.3);
}

.inline {
  display: inline-block;
}

// 定位
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.sticky {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}

.abs {
  position: absolute;
  z-index: 10;
}

.rel {
  position: relative;
  z-index: 5;
}

.fixed {
  position: fixed;
  z-index: 10;

  &--br {
    right: 15px;
    bottom: 100px;
  }
}

.full {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;

  &--abs {
    @extend .abs;
  }
}

.full-screen {
  @extend .full;
  border-radius: 0;
  box-shadow: none;
  margin: 0 !important;
  height: 100% !important;
}

// Flex布局
.flex {
  display: flex;

  &--inline {
    display: inline-flex;
  }
}

@for $i from 1 to 13 {
  .flex-#{$i} {
    flex-grow: #{$i};
  }
}

.flex-fs-0 {
  flex-shrink: 0;
}

.flex-col {
  flex-flow: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-rl {
  justify-content: flex-start;
}

.flex-rc {
  justify-content: center;
}

.flex-rr {
  justify-content: flex-end;
}

.flex-rb {
  justify-content: space-between;
}

.flex-ct {
  align-items: flex-start;
}

.flex-cc {
  align-items: center;
}

.flex-cb {
  align-items: flex-end;
}

.flex-center {
  @extend .flex-rc, .flex-cc;
}
